


/**单行，普通flex布局，上下居中，左右居中**/
.Flex { display:flex; -webkit-box-pack:center; justify-content:center; align-items:center; }
/**多行多列flex**/
.Flex[tag='MULTI'] { flex-wrap:wrap; justify-content: flex-start; align-items: flex-start; }
/**单行多列，靠左上对齐**/
.Flex[tag='LT'] { align-items:flex-start; }
.Flex[tag='RT'] { align-items:flex-end; }
/**单行，两端对齐，文字居中对齐**/
.Flex[tag='SE'] { justify-content:space-between; -webkit-justify-content:space-between; }
/**单行，靠左对齐，文字居中对齐**/
.LFlex { display:flex; -webkit-box-pack:center; justify-content:flex-start; align-items:center; }
/**单行，靠右对齐，文字居中对齐**/
.RFlex { display:flex; -webkit-box-pack:center; justify-content:flex-end; align-items:center; }
/**多行，上下居中，文字居中对齐**/
.MFlex { display:flex; -webkit-box-pack:center; justify-content:center; align-items:center; flex-direction:column; -webkit-flex-direction:column; text-align:center; }
/**多行，顶端对齐，文字居中对齐**/
.MFlex[tag='TM']  { justify-content:flex-start; }
/**多行，靠左对齐，文字居中对齐**/
.MFlex[tag='LM']  { align-items:flex-start; }
/**多行，靠右对齐，文字居中对齐**/
.MFlex[tag='RM']  { align-items:flex-end; -webkit-align-items:flex-end; }
.TMFlex { display:flex; -webkit-box-pack:center; justify-content:center; align-items:flex-start; }

.YScroll { overflow:hidden; overflow-y:auto; -webkit-overflow-scrolling:touch; overflow-scrolling:touch; }
.XScroll { overflow:hidden; overflow-x:auto; -webkit-overflow-scrolling:touch; overflow-scrolling:touch; }
article,aside,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}

/** 通用 lazyLoad **/
.success { -webkit-animation:fadeIn 01s ease 0.2s 1 both; animation:fadeIn 1s ease 0.2s 1 both; }
@-webkit-keyframes fadeIn {
  from { opacity:0; }
  to { opacity:1; }
}
@keyframes fadeIn {
  from { opacity:0; }
  to { opacity:1; }
}

/* *[THB='THB']:before,*[BHB='BHB']:after { position:absolute; left:-50%; right:-50%; height:1px; background:#e4e4e4; content:''; transform:scale(0.5); }
*[THB='THB']:before { top:0; }
*[BHB='BHB']:after { bottom:0; }
*[HB="HB"]:before { z-index:-1; position:absolute; left:-50%; right:-50%; top:-50%; bottom:-50%; border:1px solid #e4e4e4; content:''; transform:scale(0.5); } */


.flx-center{display:flex;align-items:center;justify-content:center}
.fade-transform-leave-active,.fade-transform-enter-active{transition:all 0.2s}
.fade-transform-enter-from{opacity:0;transition:all 0.2s;transform:translateX(-30px)}
.fade-transform-leave-to{opacity:0;transition:all 0.2s;transform:translateX(30px)}
.center{display: flex;justify-content: center;align-items: center;}
/**纯flex**/
.flex { display: flex; justify-content: space-between; flex-wrap: wrap;align-items:center }
.flex1{display:flex}
.flex-start{justify-content:flex-start}
.flex-end{justify-content:flex-end}
.flex-center{justify-content:center}
.flex-around{justify-content:space-around}
.flex-between{justify-content:space-between}
.flex-evenly{justify-content:space-evenly}
.flex-top{align-items:flex-start}
.flex-middle{align-items:center}
.flex-bottom{align-items:flex-end}
.flex-baseline{align-items:baseline}
.flex-stretch{align-items:stretch}
.flex-alignCenter{align-content:center}
.flex-alignStart{align-content:flex-start}
.flex-alignEnd{align-content:flex-end}
.flex-alignBetween{align-content:space-between}
.flex-column{flex-direction:column}
.flex-reverse{flex-direction:row-reverse}
.flex-column-reverse{flex-direction:column-reverse}
.flex-wrap{flex-wrap:wrap;-webkit-flex-wrap:wrap}
.flex-nowrap{flex-wrap:wrap;-webkit-flex-wrap:nowrap}
.flex_l{display: flex;justify-content: flex-start;align-items: center;}
.flex_r{display: flex;justify-content: flex-end;align-items: center;}
.flex-none{flex: none;}
.flex-1{flex:1}
.flex-01{flex:0.1}
.flex-02{flex:0.2}
.flex-03{flex:0.3}
.flex-04{flex:0.4}
.flex-05{flex:0.5}
.flex-06{flex:0.6}
.flex-07{flex:0.7}
.flex-08{flex:0.8}
.flex-09{flex:0.9}
.tl{text-align:left}
.tr{text-align:right}
.tc{text-align:center}
.center{text-align:center}
.vertical-middle{vertical-align:middle}
.vertical-top{vertical-align:top}
.vertical-bottom{vertical-align:bottom}
.none{display:none}
.inline{display:inline-block}
.block{display:block}
.relative{position:relative}
.hidden{overflow:hidden}
.bold { font-weight:bold; }
/* 让文字倾斜 */
.oblique {font-style:oblique;}
.pointer { cursor: pointer; }
/* 不换行 */
.nohuanhang{white-space:nowrap}
/* 换行 */
.huanhang{word-break:break-all}
.keep-all{word-break:keep-all}
/* 超出则自动换行，可能保留原有单词的完整性 */
.break-word{word-break:break-all;word-wrap:break-word}
/* 控制文本的换行和空白处理 */
.line-feed{word-break:break-all;word-wrap:break-word;white-space:pre-wrap}
/** 不换行 显示一行，超出隐藏 **/
.line-hiding-no{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.line-hiding-1{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;word-break:break-all;word-wrap:break-word}
.line-hiding-2{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;word-break:break-all;word-wrap:break-word}
.line-hiding-3{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;word-break:break-all;word-wrap:break-word}
.line-hiding-4{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;word-break:break-all;word-wrap:break-word}
/* 禁止 DIV 中的文本被鼠标选中 */
.unSelected{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
/*清除浮动代码*/
.fr{float:right}
.fl{float:left}
.clearfix:after{content:"";display:block;clear:both;height:0;visibility:hidden}
.clearfix::after{display:block;height:0;overflow:hidden;clear:both;content:""}
.clearfix{zoom:1}
.lineHeight1 {line-height: 1;}
.lineHeight1-1 {line-height: 1.1;}
.lineHeight1-2 {line-height: 1.2;}
.lineHeight1-3 {line-height: 1.3;}
.lineHeight1-4 {line-height: 1.4;}
.lineHeight1-5 {line-height: 1.5;}

.opacity-0	{opacity: 0;}
.opacity-5	{opacity: 0.05;}
.opacity-10	{opacity: 0.1;}
.opacity-15	{opacity: 0.15;}
.opacity-20	{opacity: 0.2;}
.opacity-25	{opacity: 0.25;}
.opacity-30	{opacity: 0.3;}
.opacity-35	{opacity: 0.35;}
.opacity-40	{opacity: 0.4;}
.opacity-45	{opacity: 0.45;}
.opacity-50	{opacity: 0.5;}
.opacity-55	{opacity: 0.55;}
.opacity-60	{opacity: 0.6;}
.opacity-65	{opacity: 0.65;}
.opacity-70	{opacity: 0.7;}
.opacity-75	{opacity: 0.75;}
.opacity-80	{opacity: 0.8;}
.opacity-85	{opacity: 0.85;}
.opacity-90	{opacity: 0.9;}
.opacity-95	{opacity: 0.95;}
.opacity-100 {opacity: 1;}

.radius-circle{border-radius: 50%;}
.width100 { width: 100%; }
.height100 { height: 100%; }
.textWithStrike {  text-decoration: line-through; }
/* 
v-cloak 来解决首次加载页面时，出现 {{ data }} 插值语法的问题
做vue项目时，遇到页面首次加载，接口请求时间较长，页面会短暂出现 {{ data }} 未渲染完数据的问题
 */
[v-cloak] {
	display: none;
}
.price:before { content: '￥';font-size:28rpx;}

/** 旋转使用动画： animation: goRotate 2s linear infinite;  */
@keyframes goRotate{
  0%{transform:rotate(0deg)}
  100%{transform:rotate(360deg)}
}
/* -----------  放大缩小 动态加载中动画  ----------- */
.loading-dots{display:flex;justify-content:center;align-items:center}
.dot{width:5px;height:5px;border-radius:50%;background-color:#fff;margin:0 5px;animation:loading-animation 1.2s infinite}
.dot1{animation-delay:0s}
.dot2{animation-delay:0.4s}
.dot3{animation-delay:0.8s}
@keyframes loading-animation{
  0%{transform:scale(1)}
  50%{transform:scale(1.5)}
  100%{transform:scale(1)}
}

/* -----------  模块居中  ----------- */
.makeCenterClass{position:absolute;width:100%;height:100%;display:flex;align-items:center;justify-content:center}


/* -----------  禁用div，不让选中  ----------- */
.disable-div {
	-webkit-user-select: none; /* Safari */
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* IE10+/Edge */
	user-select: none; /* 阻止文本选中 */
	pointer-events: none; /* 阻止鼠标事件 */
	opacity: 0.5; /* 可选：让div看起来不可点击 */
}